<template>
  <view class="main bg-white">
    <view class="bg-header"></view>
    <form class="form">
      <!-- 学号输入框 -->
      <view class="input-view">
        <view class="input-item">
          <text class="input-icon iconfont icon-user"></text>
          <input name="username" type="text" placeholder="请输入用户名/手机号/邮箱" autocomplete="off"
                 v-model="loginForm.username"
                 :placeholder-style="colorName"
                 @input="inputInput('uname',loginForm.username)"
                 @focus="inputFocus('uname',loginForm.username)"
                 @blur="inputBlur('uname',loginForm.username)"
          />
          <text :class="[showClearBtn1?'':'hidden']" class="input-icon iconfont icon-clear"  @click="inputClear('uname')"></text>
        </view>
      </view>
      <!-- 密码输入框 -->
      <view class="input-view">
        <view class="input-item">
          <text class="input-icon iconfont icon-pwd"></text>
          <input name="password" type="password" placeholder="请输入密码" autocomplete="off"
                 :placeholder-style="colorPwd"
                 v-model="loginForm.password"
                 @input="inputInput('pwd',loginForm.password)"
                 @focus="inputFocus('pwd',loginForm.password)"
                 @blur="inputBlur('pwd',loginForm.password)"
          />
          <text :class="[showClearBtn2?'':'hidden']" class="input-icon iconfont icon-clear" @click="inputClear('pwd')"></text>
        </view>
      </view>
      <view class="tip flex-row">
        <text>登录前请先阅读</text>
        <navigator url="/pages/subpage/login/subpage/protocol/main" class="protocol-text">《隐私协议》</navigator>
      </view>
      <view class="submit-btn-wrap">
        <button style="height: 35px;line-height: 35px;" @click="submit" class="submit-btn bg-primary color-white">登 录</button>
      </view>
<!--      <view class="submit-btn-wrap">
        <button style="color: #272727; background-color: #BEBEBE;"
                @click="submit" class="submit-btn bg-primary color-white">注 册</button>
      </view>-->
      <view class="zc">
        <navigator style="margin-left: 10rpx;animation-delay: 0.2s;color: #4F4F4F;float: left;">
          <text style="font-size: 30rpx;margin: 0 " class="input-icon iconfont icon-feedback"></text>
          忘记密码
        </navigator>
        <navigator url="/pages/subpage/register/main" style="color: #ffbd4a;float: right;margin-right: 5px;">
          <text style="font-size: 30rpx;margin: 0" class="input-icon iconfont icon-user"></text>
          立即注册
        </navigator>
      </view>
    </form>
    <view class="loder" v-if="loading" >
      <div class="loader-part">正在获取信息...</div>
    </view>
    <view class="bg-footer flex-row">
      <navigator
        class="back-nav"
        @click="navigateBack"
        open-type="navigateBack"
      >
        <text class="iconfont icon-back"></text>
      </navigator>
    </view>
    <i-message id="message"/>
  </view>
</template>

<script>
import {registerLogin} from "../../../api/login";
import {$Message} from '@/../static/iview/base/index'
import Bus from "../../../utils/bus";

export default {
  name: "index",
  data() {
    return {
      textValue: '正在获取信息...',
      showClearBtn1:false,
      showClearBtn2:false,
      colorName:'color: #afafaf;',
      colorPwd:'color: #afafaf;',
      loginForm: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      },
      loading: false
    }
  },
  methods: {
    submit() {
      if (!this.loginForm.username) {
        this.colorName='color: #ff9595;'
        this.setToast({ title: "请输入有效账号" })
        return
      } else if (!this.loginForm.password) {
        this.colorPwd='color: #ff9595;'
        this.setToast({ title: "密码有误" });
        return
      } else {
        this.loading=true
        registerLogin(this.loginForm).then(res => {
          if (res.code === 500) {
            this.setModal({
              content: res.msg,
              confirmText: "重试"
            });
          } else if (res.code===200) {
            this.$set(res,'logged',true)
            this.$store.dispatch("Login", res);
            this.loginForm={
              username: '',
              password: '',
              code: '',
              uuid: ''
            }
            // 改变上一页面的状态
            // Bus.$emit('跳转刷新','refresh');
            wx.navigateBack({ delta: 1 });
            this.setToast({ title: "登录成功",icon:'success' });
            /*$Message({
              content: '登录成功',
              type: 'success'
            })*/
          } else {
            this.setToast({ title: "登录出错啦" });
          }
        }).catch(err => {
          console.log(err);
          this.setModal({
            content: "不好！登录出现异常，快去汇报给开发小哥！"
          });
        }).then(() => {
          this.loading=false
        });
      }
    },
    navigateBack(){
      this.loginForm={
        username: '',
        password: '',
        code: '',
        uuid: ''
      }
      wx.navigateBack({ delta: 1 });
    },
    // 输入框输入
    inputInput(e,val) {
      if (e === "uname") {
        if (val.length > 0) {
          this.showClearBtn1=true
        }
      } else if (e === "pwd") {
        if (val.length > 0) {
          this.showClearBtn2=true
        }
      }
    },

    // 输入框聚焦
    inputFocus(e,val) {
      if (e === "uname") {
        this.colorName='color: #afafaf;'
        if (val.length > 0) {
          this.showClearBtn1=true
        }
      } else if (e === "pwd") {
        this.colorPwd='color: #afafaf;'
        if (val.length > 0) {
          this.showClearBtn2=true
        }
      }
    },

    // 输入框焦点消失
    inputBlur(e,val) {
      if (e === "uname") {
        this.showClearBtn1=false
      } else if (e=== "pwd") {
        this.showClearBtn2=false
      }
    },

    // 清空输入框
    inputClear(e) {
      if (e === "uname") {
        this.loginForm.username=""
        this.showClearBtn1=false
      } else if (e === "pwd") {
        this.loginForm.password=""
        this.showClearBtn2=false
      }
    },
  }
}
</script>

<style scoped>
.zc{
  padding-top: 30rpx;
  font-size: 28rpx;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-header {
  position: fixed;
  top: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 35%;
  background-image: url("");
}

.bg-footer {
  position: fixed;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 22%;
  align-items: flex-end;
  background-image: url("");
}

.form {
  width: 65%;
  margin: 0 auto;
}

.input-view {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  margin-bottom: 40rpx;
  background: #efeff4;
  animation-delay: 0.1s;
}

.input-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10rpx 0;
  background: #fff;
  border-bottom: 1rpx solid #ececec;
}

.input-icon {
  z-index: 999;
  font-size: 45rpx;
  margin: 0 15rpx;
}

.input-item input {
  flex: 1;
  font-size: 30rpx;
}

.tip {
  font-size: 28rpx;
  color: #afafaf;
  margin-left: 10rpx;
  animation-delay: 0.2s;
}

.protocol-text {
  color: #ffbd4a;
}

.submit-btn-wrap {
  animation-delay: 0.3s;
}

.submit-btn {
  margin: 40rpx 0 0 0;
  font-size: 32rpx;
  border-radius: 40rpx;
}

.phcolor{
  color: #afafaf;
}
.input-placeholder {
  color: #afafaf;
}
input::-webkit-input-placeholder{
  color: #ff9595;
}

.error-placeholder {
  color: #ff9595;
}

.hidden {
  visibility: hidden;
}

.back-nav {
  text-align: center;
  padding: 30rpx;
}

.back-nav text {
  font-size: 50rpx;
}

</style>
<style scoped>
.loader-part {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ffbd4a;
  letter-spacing: 0.2em;
}
.loader-part::before,
.loader-part::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #ffbd4a;
  position: absolute;
  animation: load 0.7s infinite alternate ease-in-out;
}
.loader-part::before {
  top: 0;
}
.loader-part::after {
  bottom: 0;
}

@keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px;
  }
  50% {
    height: 8px;
    width: 40px;
  }
  100% {
    left: 235px;
    height: 30px;
    width: 15px;
  }
}

</style>
